<!-- #layout name=blank-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">{{ Kooboo.text.common.Contents }}</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a :href="newContent" class="btn green navbar-btn btn-folder"
        >New Content</a
      >
      <a @click="newFolder" class="btn green navbar-btn btn-folder"
        >New folder</a
      >
      <a v-if="selected.length > 0" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="tableData" :show-select="true" :selected.sync="selected">
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <a :href="row.folderName.url" @click.stop style="cursor: pointer">{{
          row.folderName.text
        }}</a>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.usedBy">
      <template v-slot="row">
        <a
          v-for="($data, $index) in row.relationsTypes"
          class="label label-sm kb-table-label-refer"
          :style="{ background: Kooboo.getLabelColor($data) }"
          @click.stop="Kooboo.EventBus.publish(row.relationsComm, { id: row.id, by: $data, type: 'ContentFolder' })"
          >{{
            row.relations[$data] +
              " " +
              Kooboo.text.component.table[$data.toLowerCase()]
          }}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column head-class="table-action" body-class="table-action">
      <template v-slot="row">
        <a
          :class="['btn btn-sm', row.edit.class || 'blue' ]"
          @click.stop="editFolder(row)"
        >
          {{ row.edit.text }}
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <kb-relation-modal></kb-relation-modal>
  <kb-folder-editor :folders="folders" :visible.sync="newFolderModalShow" @after-edit="afterEdit" :id="currentId"></folder-editor>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/textContent/folderEditor.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/TextContents.js"></script>
